<template>
	<view style="background-color: #fff;">
		<view class="repair">
			<view class="uni-title" style="width: 30%;">日期选择：</view>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						当前选择
					</view>
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{date}}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="repair">
			<view class="uni-title">申请合同简要</view>
		</view>
		<view class="repair-text">
			<view class="uni-textarea">
				<textarea @input="bindTextAreaBlur" auto-height="true" placeholder="点击输入内容"/>
			</view>
		</view>
		<view class="repair">
			<view class="uni-title">合同主要内容</view>
		</view>
		<view class="repair-text">
			<view class="uni-textarea">
				<textarea @input="bindTextAreaBlur" auto-height="true" placeholder="点击输入内容"/>
			</view>
		</view>
		<view class="repair">
			<view class="uni-title">备注</view>
		</view>
		<view class="repair-text">
			<view class="uni-textarea">
				<textarea @input="bindTextAreaBlur" auto-height="true" placeholder="点击输入内容"/>
			</view>
		</view>
		<view class="repair-botton">
			<button type="primary" :loading="loading" :disabled="disabled" @tap="handleClick">提交</button>
		</view>
		<neil-modal :show="show" align="center" @close="closeModal()" :show-cancel="false" title="操作提示" content="申请成功">
		</neil-modal>
	</view>
</template>
<script>
	import {apiSupplement,apiAppointPush,apiTypeInfo} from '@/common/api.js';
	import neilModal from '@/components/neil-modal/neil-modal.vue';
	export default {
		name:"repair",
		components:{
			neilModal
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				radiosValue:'全天',
				date: currentDate,
				loading:false,
				disabled:false,
				content:'',
				show:false
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			radioChange(e){
				this.radiosValue = e.detail.value
			},
			bindDateChange (e) {
				this.date = e.target.value
			},
			bindTextAreaBlur(e){
				this.content = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
			
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
			
				return `${year}-${month}-${day}`;
			},
			handleClick(){
				this.loading = true
				apiTypeInfo({
					'type':'contract'
				}).then(res=>{
					this.loading = false
					
					this.content = res.data
				}).catch(err=>{
					this.loading = false
					this.toast('当前无此权限，请联系管理员')
				})
			},
			closeModal() {
			    this.show = false
				uni.navigateBack()
			},
			toast(title,icon='none'){
				uni.showToast({
					title: title,
					mask: true,
					icon:icon,
					duration: 1500
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.repair{
		display: flex;
		align-items:center;
		padding: 20upx 30upx;
		box-sizing:border-box;
		border-bottom: 1px solid #eee;
		&-radios{
			padding-left: 30upx;
		}
	}
	.repair-text{
		padding: 30upx;
	}
	.repair-botton{
		padding: 30upx;
		
	}
</style>
